<template>
  <NavBar title="偏好设置"></NavBar>
  <div>
    <div class="title">123</div>
    <van-steps :steps="steps" :active="active" @click-step="onClickStep" />
  </div>
</template>
<script setup>
import { ref } from 'vue'
const active = ref(1)
const steps = [
  {
    desc: '死板',
  },
  {
    desc: '专业',
  },
  {
    desc: '准确',
  },
  {
    desc: '平衡',
  },
  {
    desc: '创造性',
  },
  {
    desc: '离谱',
  },
  {
    desc: '荒谬',
  },
]

const onClickStep = (e) => {
  active.value = e.detail
}
</script>
<style lang="less" scoped>
::v-deep {
  .van-steps {
    background-color: transparent;

    .van-step__circle {
      width: 22rpx;
      height: 22rpx;
    }

    .van-step__circle-container {
      background-color: transparent;
    }
  }
}

.title {
  width: 48rpx;
  height: 27rpx;
  font-size: 24rpx;
  font-weight: 400;
  color: #000000;
  line-height: 27rpx;
}
</style>